<template>
    <div class="app-container">
        <el-button type="primary" @click="$router.push({path: createPath})">新增</el-button>
        <el-divider></el-divider>
        <el-table :data="list" border fit highlight-current-row>
            <el-table-column prop="id" label="ID" width="90"></el-table-column>
            <el-table-column prop="name" label="企业名称" width="180"></el-table-column>
            <el-table-column prop="legalName" label="法人代表" width="180"></el-table-column>
            <el-table-column prop="contact" label="联系人" width="180"></el-table-column>
            <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
            <!--                        <el-table-column prop="organizationCode" label="组织性质代码" width="180"></el-table-column>-->
            <!--                        <el-table-column prop="regionName" label="注册地" width="180"></el-table-column>-->
            <!--            <el-table-column prop="address" label="注册地址" width="180"></el-table-column>-->
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                    <el-button size="mini" @click="$router.push({path: `company/edit/${scope.row.id}`})">编辑</el-button>
                    <el-button size="mini" type="primary" @click="onAddAgreement(scope.row)">新增合同</el-button>
                    <el-button size="mini" type="primary" @click="onAddCertification(scope.row)">新增认证</el-button>
                    <!--                    <el-button size="mini" @click="onEdit(scope.$index, scope.row)">编辑</el-button>-->
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="新增合同" :visible.sync="dialogAgreementForm">
            <el-form :model="agreementForm">
                <el-form-item label="认证名称" :label-width="formLabelWidth">
                    <el-input v-model="agreementForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="合同编号" :label-width="formLabelWidth">
                    <el-input v-model="agreementForm.agreementCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="合同来源" :label-width="formLabelWidth">
                    <el-select v-model="agreementForm.agreementOrigin" placeholder="合同来源">
                        <el-option v-for="item in options.agreementOrigin" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAgreementForm = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitAgreement">确 定</el-button>
            </div>
        </el-dialog>


        <el-dialog title="新增认证" :visible.sync="dialogCertificationForm">
            <el-form :model="certificationForm">
                <el-form-item label="所属合同" :label-width="formLabelWidth">
                    <el-select v-model="certificationForm.companyCertificationId"
                               :disabled="optsAgreements.length === 0" placeholder="所属合同">
                        <el-option v-for="item in optsAgreements" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="认证体系" :label-width="formLabelWidth">
                    <el-select v-model="certificationForm.certificationCode" placeholder="认证体系">
                        <el-option v-for="item in options.certification" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核类型" :label-width="formLabelWidth">
                    <el-select v-model="certificationForm.companyCertificationType" placeholder="审核类型">
                        <el-option v-for="item in options.auditType" :key="item.value" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="认证人数" :label-width="formLabelWidth">
                    <el-input-number v-model="certificationForm.certificationPeople" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="认证范围" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="5" v-model="certificationForm.companyCertificationRange"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogCertificationForm = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitCertification">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import request from '../../utils/request';
    import { mapGetters } from 'vuex';

    export default {
        name: "Index",
        computed: {
            ...mapGetters([
                'options'
            ])
        },
        data () {
            return {
                createPath: '/company/create',
                list: [],
                page: 1,
                dialogAgreementForm: false,
                dialogCertificationForm: false,
                agreementForm: {
                    companyId: '',
                    name: '',
                    agreementCode: '',
                    agreementOrigin: '',
                },
                certificationForm: {
                    companyId: '',
                    companyCertificationId: '',
                    certificationCode: '',
                    companyCertificationType: '',
                    certificationPeople: 1,
                    companyCertificationRange: ""
                },
                optsAgreements: [],
                formLabelWidth: '120px'
            };
        },
        mounted () {
            this.getItems();
        },
        methods: {
            getItems () {
                request({
                    url: '/api/company/index'
                }).then(res => {
                    this.list = res.data.list;
                    // console.log(res.data)
                });
            },
            onAddAgreement (row) {
                this.agreementForm.companyId = row.id;
                this.agreementForm.name = row.name;
                this.agreementForm.agreementCode = '';
                this.agreementForm.agreementOrigin = '';

                this.dialogAgreementForm = true;
            },
            onAddCertification (row) {
                this.optsAgreements = [];
                request({
                    url: '/api/company/agreements',
                    params: {companyId: row.id}
                }).then(res => {
                    this.optsAgreements = res.data.list;
                });

                this.certificationForm.companyId = row.id;
                this.certificationForm.certificationCode = '';
                this.certificationForm.companyCertificationType = '';
                this.certificationForm.certificationPeople = 1;
                this.certificationForm.companyCertificationRange = '';

                this.dialogCertificationForm = true;
            },
            onSubmitAgreement () {
                request({
                    url: '/api/company/add-cert',
                    method: 'post',
                    data: this.agreementForm
                }).then(res => {
                    this.dialogAgreementForm = false;
                });
            },
            onSubmitCertification () {
                request({
                    url: '/api/company/add-cert-detail',
                    method: 'post',
                    data: this.certificationForm
                }).then(res => {
                    this.dialogCertificationForm = false;
                });
            },
            onCreate () {
                this.$router.push({path: '/company/create'});
            },
            onEdit (index, row) {
                console.log(row);
            }
        }
    };
</script>

<style scoped>

</style>
